<template>
	<view class="time-box">
		<view class="weekday">
			<view class="start">{{ startDay }}</view>
			<view class="end">{{ endDay }}</view>
		</view>
		<view class="day-co">
			<view >{{ days }}天</view>
		</view>
		<view class="date-time-picker">
			 <uni-datetime-picker v-model="timeList" @change="timeChange" type="datetimerange" :border="false"
				:disabled="disabled" rangeSeparator="" /> 
				
		</view>

	</view>

</template>

<script>
	export default {
		props: {
			timeRangeList: {
				type: Array,
				default: () => []
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		watch: {
		  timeRangeList(newVal) {
		    this.timeList = newVal;
			console.log(this.timeList)
		    this.timeChange();
		  },
		},

		data() {
			return {
				timeList: uni.getStorageSync('datetimerange')||'',
				days: "-",
				startDay: "-",
				endDay: "-",
				pickerOptions: {
					disabledDate(date) {
						return date.getTime() < Date.now() - 8.64e7;
					}
				},
			};
		},
		mounted() {
			if (this.timeRangeList && this.timeRangeList.length == 2) {
				this.timeList = this.timeRangeList;
				this.timeChange();
			}
		},
		methods: {
			timeChange() {
				let start = new Date(this.timeList[0]),
					end = new Date(this.timeList[1]);
				let startDay = start.getDay(),
					endDay = end.getDay();
				let list = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				this.startDay = list[startDay];
				this.endDay = list[endDay];
				let day = (end.getTime() - start.getTime()) / (24 * 60 * 60 * 1000);
				this.days = day.toFixed(0);
				this.$emit("timeChange", this.timeList);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.time-box {
		width: 100%;
		height: 80px;
		position: relative;

		.weekday {
			width: 100%;
			height: 45px;
			line-height: 32px;
			color: #fff;
			position: relative;

			view {
				width: 100px;
				height: 40px;
				background: linear-gradient( 180deg, #88ACFF 0%, #2165FF 100%);
				position: absolute;
				top: 5px;
				text-align: center;
			}

			.start {
				left: 0;
				font-weight: 400;
				font-size: 20px;
			}

			.end {
				right: 0;
				font-weight: 400;
				font-size: 20px;
			}
		}

		.day-co {
			position: absolute;
			top: 40px;
			left: 50%;
			transform: translateX(-50%);
			background: #ceebff;
			width: 50px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			border-radius: 5px;
			color: #0480FB;
			font-size: 20px;
			z-index: 9;

			&::before {
				content: '';
				position: absolute;
				left: -30px;
				top: 50%;
				width: 30px;
				height: 1px;
				background: #D0EAFE;
				z-index: 8;
			}

			&::after {
				content: '';
				position: absolute;
				right: -30px;
				top: 50%;
				width: 30px;
				height: 1px;
				background: #D0EAFE;
				z-index: 8;
			}
		}

		.date-time-picker {
			width: 100%;
		}

		::v-deep {
			.uni-date-editor {
				border: none !important;


				&:hover {}

				&.is-disabled {
					background: transparent;

				}

			}

			.uni-date-x {
				background: transparent;

			}

			.uni-date__x-input {

				background: #edf7ff;
				width: 95px;
				height: 50px;
				line-height: 20px;
				position: relative;
				text-align: center;

				&:nth-of-type(1) {
					position: absolute;
					left: 0;
					top: 0;
				}

				&:nth-of-type(3) {
					position: absolute;
					right: 0;
					top: 0;
				}
			}

			.range-separator {
				display: none;
			}

			.uni-icons {
				display: none;


			}

		}
	}
</style>